<template>
  <div >
    <el-form :inline="true" :model="searchSup" class="demo-form-inline">
      <el-form-item label="供应商代码">
        <el-input
            size="mini"
            v-model="searchSup.supCode"
            placeholder="请输入供应商代码"
        ></el-input>
      </el-form-item>

      <el-form-item label="供应商名称">
        <el-input
            size="mini"
            v-model="searchSup.supName"
            placeholder="请输入供应商名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="供应商联系人">
        <el-input
            size="mini"
            v-model="searchSup.supMan"
            placeholder="请输入供应商联系人"
        ></el-input>
      </el-form-item>
      <el-form-item label="供应商联系电话">
        <el-input
            size="mini"
            v-model="searchSup.supPho"
            placeholder="请输入供应商联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item label="供应商描述">
        <el-input
            size="mini"
            v-model="searchSup.supDes"
            placeholder="请输入供应商描述"
        ></el-input>
      </el-form-item>




      <el-form-item >
        <el-button size="small" type="primary" @click="page()">查询</el-button>
        <el-button size="small" type="info" @click="clearInfo2();page()">清空</el-button>

        <el-button
            size="small"
            type="primary"
            @click="dialogFormVisible = true; sup={}"
        >+ 新增供应商
        </el-button
        >
      </el-form-item>

    </el-form>





    <!-- 数据表格 -->
    <template>
      <el-table
          highlight-current-row
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 1124px"

      >
        <el-table-column type="index" width="100" label="序号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="supCode" width="100" label="供应商代码" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="supName" width="100" label="供应商名称" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="supMan" width="140" label="供应商联系人" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="supPho" width="140" label="供应商联系电话" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="supDes" width="140" label="供应商描述" header-align="center"
                         align="center"></el-table-column>

        <el-table-column label="操作" width="400" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                plain
                @click="selectById(scope.row.supCode)"
            >编辑
            </el-button>

            <el-button
                size="mini"
                type="danger"
                plain
                @click="deleteById(scope.row.supCode)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 新增 -->
    <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
      <el-form :model="sup">
        <el-form-item label="供应商代码" :label-width="formLabelWidth">
          <el-input v-model="sup.supCode" placeholder="请输入供应商代码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" :label-width="formLabelWidth">
          <el-input v-model="sup.supName" placeholder="请输入供应商名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商联系人" :label-width="formLabelWidth">
          <el-input v-model="sup.supMan" placeholder="请输入供应商联系人" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商联系电话" :label-width="formLabelWidth">
          <el-input v-model="sup.supPho" placeholder="请输入供应商联系电话" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商描述" :label-width="formLabelWidth">
          <el-input v-model="sup.supDes" placeholder="请输入供应商描述" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;clearInfo()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="商品信息" :visible.sync="dialogForm2Visible">
      <el-form :model="sup">
        <el-form-item label="供应商代码" :label-width="formLabelWidth">
          <el-input v-model="sup.supCode" placeholder="请输入供应商代码" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" :label-width="formLabelWidth">
          <el-input v-model="sup.supName" placeholder="请输入供应商名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商联系人" :label-width="formLabelWidth">
          <el-input v-model="sup.supMan" placeholder="请输入供应商联系人" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商联系电话" :label-width="formLabelWidth">
          <el-input v-model="sup.supPho" placeholder="请输入供应商联系电话" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商描述" :label-width="formLabelWidth">
          <el-input v-model="sup.supDes" placeholder="请输入供应商描述" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false;clearInfo()">取 消</el-button>
        <el-button type="primary" @click="add2()">确 定</el-button>
      </div>
    </el-dialog>


    <br>
    <!--分页工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="background"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
    </el-pagination>



  </div>
</template>

<script>
import {addSupplier} from "@/api/supplier";
import {changeSupplier} from "@/api/supplier";
import {deleteSupplier} from "@/api/supplier";
import {page} from "@/api/supplier";

export default {
  data() {
    return {
      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      formLabelWidth: "120px",
      dialogFormVisible: false, //控制对话框是否可见
      dialogForm2Visible: false, //控制对话框是否可见
      sup: {//新增和编辑
        supCode: "",
        supName: "",
        supMan: "",
        supPho: "",
        supDes: "",
      },
      searchSup:{//条件查询
        supCode: "",
        supName: "",
        supMan: "",
        supPho: "",
        supDes: "",
      },
      tableData: [],
    };
  },

  methods: {
    deleteById(id) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
      deleteSupplier(id).then((res)=>{
          if(res.data.code===1){
            this.$message.success("删除成功")
            this.page()
          }
      }).catch((e)=>{})


      }).catch(() => {
        //用户点击取消按钮
        this.$message.info("已取消删除");
      });
    },

    selectById(id) {
        for(let i=0;i<this.tableData.length;i++){
          if(this.tableData[i].supCode===id){
            this.sup=this.tableData[i];
            break;
          }
        }
        this.dialogForm2Visible=true

    },
    clearInfo(){
      this.sup = {
        supCode: "",
        supName: "",
        supMan: "",
        supPho: "",
        supDes: "",
      }
    },
    clearInfo2(){
      this.searchSup = {
        supCode: "",
        supName: "",
        supMan: "",
        supPho: "",
        supDes: "",
      }
    },
    add() {
      const {sup} = this;
      if (!sup.supCode || !sup.supName || !sup.supMan || !sup.supPho || !sup.supDes) {
        this.$message("请完整填写");
      } else {
        addSupplier(this.sup).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("添加成功")
            this.dialogFormVisible = false
            this.clearInfo()
            this.page()
          }
        }).catch((e) => {
        })
      }

    },
    add2() {
      const {sup} = this;
      if (!sup.supCode || !sup.supName || !sup.supMan || !sup.supPho || !sup.supDes) {
        this.$message("请完整填写");
      } else {
        changeSupplier(this.sup).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("修改成功")
            this.dialogForm2Visible = false
            this.clearInfo()
          }
        }).catch((e) => {
        })
      }

    },


    //分页
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val;
      this.page();
    },
    handleCurrentChange(val) {
      // 重新设置当前页码
      this.currentPage = val;
      this.page();
    },

    // 查询分页数据
    page() {
      page(
          this.searchSup,
          this.currentPage,
          this.pageSize
      ).then((res) => {
        console.log(res);
        if(res.data.code!=0){
          this.totalCount = res.data.data.total;
          this.tableData = res.data.data.rows;
        }
      }).catch((e)=>{});
    },

  },
  mounted() {
    this.page();
  },
};
</script>
<style>

</style>
